<template>
  <div>
    <!-- 广告区域 -->
    <div class="swipe">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in swipeList" :key="item">
          <img :src="item.img"> 
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 版心 w  -->
    <!-- 搜索框大盒子 -->
    <div class="search">
      <!-- 搜索框中间盒子 -->
      <div class="search_1 w">
        <!-- 搜索框本框 -->
        <div class="search_top">
          <input type="text" v-model="keywords" placeholder="搜索职位" />
          <button type="button" @click="search">搜索</button>
        </div>
      </div>
    </div>

    <!-- 全部职位  all 全部-->
    <div class="all w">
      <!-- <div class="all_left">
        <p>
          <span class="g">技术</span>
          <a href="#"><span>Java</span></a>
          <a href="#"><span>PHP</span></a>
          <a href="#"><span>web前端</span></a>
          <a href="#"><span>算法工程师</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">产品</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">设计</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">运营</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">市场</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span>数据产品经理</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">人事/财务/行政</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <p>
          <span class="g">高级管理</span>
          <a href="#"><span>产品经理</span></a>
          <a href="#"><span>产品总监/VP</span></a>
          <a href="#"><span class="h"> > </span></a>
        </p>
        <div class="left_buttom">
          <span>显示全部职位</span>
        </div>
      </div> -->
      <!-- 右边图片 -->
      <div class="all_right">
        <div class="p"><img src="images/xiaoyuan.jpg" /></div>
        <div class="p"><img src="images/sjs.jpg" /></div>
        <div class="p"><img src="images/xsj.jpg" /></div>
        <div class="p"><img src="images/sf.jpg" /></div>
        <div class="p"><img src="images/nianxin.jpg" /></div>
      </div>
    </div>

    <!-- 热招职位 hot posts-->
    <div class="hot_posts w">
      <!-- 热招标题 -->
      <div class="hot_post">
        <span>热招职位</span>
      </div>
      <!--it 互联网  -->
      <div class="hot_top">
        <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item"
            :name="item"
            v-for="item in types"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 以下职位 -->
      <div class="hot_bottom w">
        <ul>
          <li v-for="job in data" @click="tojob(job)">
            <div class="bottom_1">
              <div class="top_1">
                <a href="#">
                  <p class="tx">
                    {{ job.jobName }}
                    <span class="xinzi">{{ job.salary }}</span>
                  </p>
                  <p>
                    <span class="xiao">{{ job.jobLocation }}</span>
                    <span class="xiao">| {{ job.experience }} |</span>
                    <span class="xiao"> {{ job.xueli }}</span>
                  </p>
                </a>
              </div>
              <div class="bottom_2" v-if="job.publisherInfo">
                <a href="#">
                  <img
                    :src="job.publisherInfo.avator"
                    style="
                      width: 30px;
                      height: 30px;
                      margin-right: 10px;
                      vertical-align: middle;
                      border-radius: 50%;
                    "
                  />
                  <span style="color: black; font-size: 13px">{{
                    job.publisherInfo.username
                  }}</span>
                  <span class="xiao" style="padding: 0 10px">{{
                    job.type
                  }}</span></a
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 查看全部 -->
      <p class="ck">
        <a @click="search">查看更多</a>
      </p>
    </div>
  </div>
</template>

<script>
import { getJob, getJobTypes, getUserInfo } from "../service";
export default {
  name: "YHome",
  data() {
    return {
      keywords: "",
      types: [],
      activeName: "",
      data: [],
      swipeList: [
        {
          img: require('../assets/images/swipe1.png')
        },
        {
          img: require('../assets/images/swipe2.png')
        }
      ]
    };
  },
  methods: {
    search() {
      this.$router.push("/job");
    },
    handleClick() {
      this.data = this.allJobs.filter((v) => v.type === this.activeName);
    },
    tojob(job) {
      this.$router.push({
        name: 'job',
        params: job
      })
    }
  },
  created() {
    getJobTypes().then((res) => {
      this.types = res.data;
      this.activeName = this.types[0];
      getJob().then(async (res) => {
        this.allJobs = res.data.filter(v => v.examine === 'true');
        for (let item of res.data) {
          item.tags = JSON.parse(item.tags);
          if (item.publisherId) {
            let user = await getUserInfo(item.publisherId);
            item.publisherInfo = user.data;
          }
        }
        this.handleClick();
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.ck {
  margin-bottom: 20px;
}
.tabs {
  width: 550px;
  margin: 0 auto;
}
.swipe {
  width: 1200px;
  margin: 20px auto;

  img {
    width: 100%;
    height: 400px;
  }
}
</style>
